<template>
  <div class="img-karina-container">
    <div class="panel-container">
      <div 
        v-for="(panel, index) in panels" 
        :key="index"
        :ref="(el) => imageRefs[index] = el"
        :class="['panel', { active: activeIndex === index, loaded: panel.loaded, 'mobile': isMobile }]"
        :style="{ backgroundImage: panel.loaded ? `url(${panel.image})` : 'none' }"
        @click="handlePanelActivate(index)"
        @mouseenter="handleMouseEnter(index)"
      >
        <div class="panel-overlay"></div>
        <div v-if="!panel.loaded" class="loading-placeholder">
          <div class="loading-spinner"></div>
        </div>
        <h3 class="panel-title">{{ panel.title }}</h3>
        <div class="panel-description">
          <p>{{ panel.description }}</p>
          <span v-if="isMobile" class="mobile-hint">💡 点击图片展开</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// 导入本地图片资源
import Karina1 from '@/assets/wrapper/Karina1.png'
import Karina2 from '@/assets/wrapper/Karina2.png'
import Karina3 from '@/assets/wrapper/Karina3.png'
import Karina4 from '@/assets/wrapper/Karina4.png'
import Karina5 from '@/assets/wrapper/Karina5.png'

// 面板数据
const panels = ref([
  {
    title: 'One',
    description: '程序员最讨厌的四件事：1. 写注释 2. 写文档 3. 别人不写注释 4. 别人不写文档',
    image: Karina1,
    loaded: false
  },
  {
    title: 'Two',
    description: '要理解递归，首先要理解递归，然后理解递归，最后要理解递归',
    image: Karina2,
    loaded: false
  },
  {
    title: 'Three',
    description: '程序员常说的三句话：1.我这是正常的啊 2.不可能出现这种情况 3.重启一下试试',
    image: Karina3,
    loaded: false
  },
  {
    title: 'Four',
    description: 'Debug就像解谜，自己出题自己解',
    image: Karina4,
    loaded: false
  },
  {
    title: 'Five',
    description: '爱像死循环，开始就无法结束。就算耗尽所有资源，但愿意为你运行下去。',
    image: Karina5,
    loaded: false
  }
])

// 当前激活的面板索引
const activeIndex = ref(0)

// 设置激活面板
const setActivePanel = (index) => {
  activeIndex.value = index
}

// 检测是否为移动设备
const isMobile = ref(false)

// 处理面板激活逻辑
const handlePanelActivate = (index) => {
  // 移动端通过点击触发
  if (isMobile.value) {
    setActivePanel(index)
  }
}

// 处理鼠标悬停（桌面端）
const handleMouseEnter = (index) => {
  // 桌面端通过悬停触发
  if (!isMobile.value) {
    setActivePanel(index)
  }
}

// 检测设备类型
const checkDeviceType = () => {
  isMobile.value = window.innerWidth <= 768 || 'ontouchstart' in window
}

// 监听窗口大小变化
let resizeTimer = null
const handleResize = () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    checkDeviceType()
  }, 250)
}

// 懒加载相关
const imageRefs = ref([])
const observer = ref(null)

// 加载图片
const loadImage = (index) => {
  if (panels.value[index].loaded) return
  
  const img = new Image()
  img.src = panels.value[index].image
  img.onload = () => {
    panels.value[index].loaded = true
  }
}

// 创建Intersection Observer
const createObserver = () => {
  if ('IntersectionObserver' in window) {
    observer.value = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = parseInt(entry.target.dataset.index)
            loadImage(index)
            observer.value.unobserve(entry.target)
          }
        })
      },
      {
        rootMargin: '50px 0px',
        threshold: 0.1
      }
    )
  }
}

// 初始化懒加载
const initLazyLoad = async () => {
  await nextTick()
  
  if (observer.value) {
    imageRefs.value.forEach((el, index) => {
      if (el) {
        el.dataset.index = index
        observer.value.observe(el)
      }
    })
  } else {
    // 浏览器不支持IntersectionObserver，直接加载所有图片
    panels.value.forEach((_, index) => {
      loadImage(index)
    })
  }
}

onMounted(() => {
  checkDeviceType()
  window.addEventListener('resize', handleResize)
  createObserver()
  initLazyLoad()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (observer.value) {
    observer.value.disconnect()
  }
})
</script>

<style scoped lang="scss">
.img-karina-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.panel-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 500px;
  gap: 15px;
}

.panel {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 25px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  background-color: #f0f0f0; // 加载时的背景色
  
  // 桌面端鼠标悬停效果
  &:not(.mobile):hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  
  // 移动端点击效果
  &.mobile:active {
    transform: scale(0.98);
  }
  
  &.active {
    flex: 5;
    
    .panel-overlay {
      background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.6) 100%
      );
    }
    
    .panel-title {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.3s;
    }
    
    .panel-description {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.5s;
    }
  }
  
  // 图片加载动画
  &.loaded {
    animation: fadeIn 0.5s ease-in-out;
  }
}

.panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  transition: all 0.5s ease;
}

.panel-title {
  position: absolute;
  bottom: 40px;
  left: 30px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  z-index: 2;
  
  &::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.3));
    transition: width 0.5s ease;
  }
}

.panel.active .panel-title::before {
  width: 100%;
  transition-delay: 0.4s;
}

.panel-description {
  position: absolute;
  bottom: 15px;
  left: 30px;
  right: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  z-index: 2;
  
  p {
    margin: 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  }
  
  .mobile-hint {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    font-style: italic;
  }
}

// 加载占位符
.loading-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  z-index: 1;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

// 动画定义
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 移动端适配
@media (max-width: 768px) {
  .panel-container {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
  
  .panel {
    height: 120px;
    flex: none;
    
    &.active {
      flex: none;
      height: 200px;
    }
    
    // 移动端点击效果
    &:active {
      transform: scale(0.98);
    }
  }
  
  .panel-title {
    font-size: 18px;
    bottom: 20px;
    left: 20px;
  }
  
  .panel-description {
    font-size: 12px;
    left: 20px;
    right: 20px;
    bottom: 10px;
  }
  
  .loading-spinner {
    width: 30px;
    height: 30px;
    border-width: 2px;
  }
}

@media (max-width: 480px) {
  .img-karina-container {
    padding: 10px;
  }
  
  .panel {
    height: 100px;
    border-radius: 15px;
    
    &.active {
      height: 160px;
    }
  }
  
  .panel-title {
    font-size: 16px;
    bottom: 15px;
    left: 15px;
  }
  
  .panel-description {
    display: none;
    
    .panel.active & {
      display: block;
      font-size: 11px;
      left: 15px;
      right: 15px;
    }
  }
  
  .loading-spinner {
    width: 25px;
    height: 25px;
    border-width: 2px;
  }
}
</style>